<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .tab p {
            display: none;
        }
        .tab .active {
            color: red;
        }
        .tab .show {
            display: block;
        }
    </style>
</head>
<body>

    <div class="tab" id="a">
        <div class="tab_td">
            <button class="active">1</button>
            <button>2</button>
            <button>3</button>
        </div>
        <div class="tab_bd">
            <p class="show">111</p>
            <p>222</p>
            <p>333</p>
        </div>
    </div>


    <div class="tab" id="b">
        <div class="tab_td">
            <button class="active">1</button>
            <button>2</button>
            <button>3</button>
        </div>
        <div class="tab_bd">
            <p class="show">111</p>
            <p>222</p>
            <p>333</p>
        </div>
    </div>



    <script src="../js/tools.js"></script>
    <script src="../js/tab.js"></script>
    <script>


        // type 事件类型  默认为click
        // function tab(ele , type = 'click') {
        //     const oTab = get(ele) ;
        //     const oBtns = oTab.querySelectorAll('button') ;
        //     const oPs = oTab.querySelectorAll('p') ;
        //     // 绑定事件
        //     for(let i = 0 ; i < oBtns.length ; i++) {
        //         oBtns[i]['on' + type] = function() {
        //             // 清除所有的
        //             for(let j = 0 ; j < oBtns.length ; j++) {
        //                 oBtns[j].classList.remove('active') ;
        //                 oPs[j].classList.remove('show') ;
        //             }
        //             // 显示当前
        //             oBtns[i].classList.add('active');
        //             oPs[i].classList.add('show');
        //         }
        //     }
        // }


        // tab('#a');

        // tab('#b' , 'mouseover');



        // 封装选项卡    抽象除一个选项卡这样一个构造器出来
        //   提取共有的属性和方法
        //   点击的按钮
        //   显示的元素

        //   绑定事件



       


        const t1 = new Tab('#a') ;
      

        const t2 = new Tab('#b' , 'mouseover')


    </script>
    
</body>
</html>